import React, { useEffect, useState } from 'react'
import {
  Map,
  APILoader,
  ScaleControl,
  ToolBarControl,
  ControlBarControl,
  Geolocation,
  Marker,
  MapTypeControl,
  useMapContext
} from '@uiw/react-amap'
import { useDispatch } from 'umi'
import { Button } from 'antd'
import moment from 'moment'
import styles from './index.less'

window._AMapSecurityConfig = {
  securityJsCode: '4f19cca6feb1f9de2397d85dea01c2eb'
}

const Home = () => {
  const dispatch = useDispatch()
  const [clientHeight, setClientHeight] = useState(window.innerHeight)
  const [mapHeight, setMapHeight] = useState(window.innerHeight + 92)
  const [clientWidth, setClientWidth] = useState(window.innerWidth)
  // const [originWidth, setOriginWidth] = useState(window.innerWidth);
  // const [scale, setScale] = useState(window.innerWidth / 1200);
  const { AMap } = useMapContext()

  useEffect(() => {
    const resize = () => {
      setClientHeight(window.innerHeight)
      setMapHeight(window.innerHeight + 92)
      setClientWidth(window.innerWidth)
      // setScale(window.innerWidth / 1200);
      // console.log(window.innerWidth, originWidth, window.innerWidth / originWidth)
    }
    window.addEventListener('resize', resize)
    // document.body.style.overflow = 'hidden';

    return () => {
      window.removeEventListener('resize', resize)
      // document.body.style.overflow = 'auto';
    }
  }, [])

  return (
    <div
      className={styles.home_wrapper}
      style={{ height: `${clientHeight}px` }}
    >
      123
    </div>
  )
}

export default Home
